<template>

  <div>

    <el-dialog
      :visible.sync="dialogVisible"
      width="800px"
      @close="handleClose">

      <div style="position: relative">

        <el-link icon="el-icon-circle-close" class="notify-close" @click="handleClose"/>

        <div v-if="examData.openType===99" class="notify-empty">
          本场考试已关联学习课程，无法通过二维码、链接进入，请从课程学习进入！
        </div>

        <div v-else class="notify-box">

          <div v-if="siteData.h5Host" ref="shareBox" class="left-box">

            <div class="left-box-inner">

              <div class="logo-box">
                <img :src="siteData.backLogo" crossOrigin="anonymous">
                <span class="site-name">{{ examData.title }}</span>
              </div>

              <div class="info-line">开始时间：{{ examData.startTime }}</div>
              <div class="info-line">结束时间：{{ examData.endTime }}</div>
              <div class="info-line">考试时长：{{ examData.totalTime }}分钟</div>

              <vue-qr
                :size="200"
                :text="codeUrl"/>

              <div class="scan-tip">
                扫描二维码参加考试
              </div>

            </div>

            <div class="half-circle left"/>
            <div class="half-circle right"/>

          </div>

          <div class="right-box">

            <div class="main-title">分享考试</div>

            <div class="title">考试地址</div>
            <div class="link-box">
              <div style="flex-grow: 1">
                <a :href="pcUrl" target="_blank">{{ pcUrl }}</a>
              </div>
              <div class="link-copy">
                <el-link icon="el-icon-document-copy" size="mini" @click="copy( $event)">复制链接</el-link>
              </div>
            </div>

            <div v-if="examData.openType!==3" style="padding-top: 30px">
              <el-alert type="error" title="只支持开放权限为【部分学员】的考试发送小范围提醒，全员提醒请通过系统公告来通知！"/>
            </div>

            <div v-else>

              <div class="title">通知方式</div>
              <div>
                <el-checkbox v-model="dataForm.useIm">站内信</el-checkbox>
                <el-checkbox v-model="dataForm.useSms">短信</el-checkbox>
                <el-checkbox v-model="dataForm.useEmail">邮件</el-checkbox>
              </div>

              <div class="title">通知设置</div>
              <div>
                <el-select v-model="dataForm.trigger" placeholder="请选择" size="mini" style="width: 100px">
                  <el-option :value="1" label="立即发送"/>
                  <el-option :value="2" label="定时推送"/>
                </el-select>

                <el-date-picker
                  v-if="dataForm.trigger==2"
                  v-model="dataForm.sendTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  size="mini"
                  style="margin-left: 10px; width: 200px"
                  type="datetime"
                  placeholder="选择日期时间"/>
              </div>

              <div>
                <el-radio-group v-model="dataForm.scope" size="mini" style="margin-top: 20px; margin-bottom: 20px">
                  <el-radio :label="1">全部应考学员</el-radio>
                  <el-radio :label="2">未参考学员</el-radio>
                </el-radio-group>
              </div>

            </div>

            <div class="btn-box">
              <el-button :disabled="!siteData.h5Host" size="mini" style="width: 130px" type="primary" plain @click="saveToImage">下载图片</el-button>
              <el-button size="mini" style="width: 130px" type="primary" plain @click="goExam">考一下</el-button>
              <el-button :disabled="(examData.openType!==2 && examData.openType!==3) || (!dataForm.useIm && !dataForm.useSms && !dataForm.useEmail)" size="mini" style="width: 130px" type="primary" @click="handleSend">确定</el-button >
            </div>

          </div>

        </div>

      </div>

    </el-dialog>

  </div>

</template>

<script>
import { prepareNotify, simpleDetail } from '@/api/exam/exam'

import clip from '@/utils/clipboard'
import html2Canvas from 'html2canvas'

import VueQr from 'vue-qr'
import { mapGetters } from 'vuex'

export default {
  name: 'ShareExamDialog',
  components: { VueQr },
  props: {
    dialogShow: {
      type: Boolean,
      default: false
    },
    examId: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      dialogVisible: false,
      loading: false,
      dataForm: {
        trigger: 1,
        scope: 1,
        sendTime: '',
        useIm: false,
        useSms: false,
        useEmail: false
      },
      examData: {
      },
      pcUrl: '',
      codeUrl: '',
      userDialog: false
    }
  },

  computed: {
    ...mapGetters([
      'siteData'
    ])
  },
  watch: {
    // 检测查询变化
    dialogShow: {
      handler() {
        this.dialogVisible = this.dialogShow
      }
    },
    // 检测查询变化
    examId: {
      handler(val) {
        this.dataForm.examId = val
        this.fetchExam()
        this.buildUrl()
      }
    }
  },
  created() {
    this.dialogVisible = this.dialogShow
    if (this.examId) {
      this.dataForm.examId = this.examId
      this.fetchExam()
      this.buildUrl()
    }
  },
  methods: {

    // 复制考试链接
    copy(e) {
      clip(this.pcUrl, e)
    },

    // 保存为图片
    saveToImage() {
      this.$nextTick(() => {
        html2Canvas(this.$refs.shareBox, {
          useCORS: true
        }).then(res => {
          const imgUrl = res.toDataURL('image/png')
          const aLink = document.createElement('a')
          aLink.href = imgUrl
          aLink.download = new Date().toLocaleString() + '.png'
          document.body.appendChild(aLink)
          aLink.click()
          document.body.removeChild(aLink)
        })
      })
    },

    // 试试去考试
    goExam() {
      // 打开新窗口
      window.open(this.pcUrl)
    },

    // 关闭窗口
    handleClose() {
      this.$emit('update:dialogShow', false)
    },

    // 获取考试详情
    fetchExam() {
      simpleDetail(this.dataForm.examId).then(res => {
        this.examData = res.data
      })
    },

    // 构建PC端链接
    buildUrl() {
      const url = document.location.protocol + '//' + window.location.host + '/pages/exam/check/' + this.examId
      this.pcUrl = url
      this.codeUrl = this.siteData.h5Host + 'pages/exam/detail?id=' + this.examId
    },

    // 发送消息
    handleSend() {
      console.log(this.dataForm)

      if (!this.dataForm.useIm && !this.dataForm.useSms && !this.dataForm.useEmail) {
        this.$message.error('必须要选择一种通知方式！')
        return
      }

      if (this.dataForm.trigger === 2 && !this.dataForm.sendTime) {
        this.$message.error('定时推送必须指定一个时间！')
        return
      }

      prepareNotify(this.dataForm).then(res => {
        this.$notify({
          title: '成功',
          message: '通知下发成功，请到消息中心查看发送详情！',
          type: 'success',
          duration: 2000
        })
        // 关闭
        this.handleClose()
      })
    }
  }
}
</script>

<style scoped>

::v-deep .el-dialog__body{
  padding: 0;
}

::v-deep .el-dialog__header{
  display: none;
}

::v-deep a{
  color: #1890ff;
  font-weight: 700;
}

::v-deep a:hover{
  color: #ff8000;
}

</style>
